<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性盒属性flex-wrap</title>
		<style>
			.box{
				min-height: 160px;
				display: flex;/*指定弹性盒的容器*/
				/*
				nowrap(默认)：不换行
				wrap:换行，第一行在上方
				wrap-reverse：换行，第一行在下方
				*/
				flex-wrap: wrap-reverse;
				justify-content: center;/*设置弹性盒子元素向行中间位置对齐*/
				align-items: center;/*弹性盒子元素向垂直于轴的方向上的中间位置对齐*/
				background-color: black;
				opacity: 0.5;
			}
			.box div{
				background-color: white;
				height: 100px;
				width: 100px;
				background-color: yellow;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="A">A</div>
			<div class="B">B</div>
			<div class="C">C</div>
			<div class="C">D</div>
			<div class="C">E</div>
			<div class="C">F</div>
			<div class="C">G</div>
			<div class="C">H</div>
			<div class="C">I</div>
			<div class="C">J</div>
		</div>
	</body>
</html>
